<template>
	<view>
		<view class="bj1">
			<span class="sj">兑换商城</span>
			<navigator url="./shoppingcart">
			<view class="fl"><image src="../../static/scimg/gwc.png" style="width: 27px;height: 27px;"></image></view>
			</navigator>
			<navigator url="../index/quanjuss">
				<view class="ss"><image src="../../static/img/sousuo.png" style="width: 25px;height: 25px;"></image></view>
			</navigator>
			
			<view class="lunb">
				<swiper autoplay style="margin-bottom:30px;">
					<swiper-item>
						<image src="../../static/scimg/sc.png" style="width:100%; height:120px;"></image>
					</swiper-item>
					<swiper-item>
						<image src="../../static/scimg/sc2.png" style="width:100%; height:120px;"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view style="width: 100%;height: 10px; background-color: #ECFDFA;"></view>
		<view class="zong">
			<view class="xsqg">
				<view class="xs">
					<view style="width: 4px;height: 17px;background-color: #2BCDDD;margin-left: 20px;margin-top: 3px;border-radius: 15px;display: inline-block"></view>
					<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>限时兑换</b></span>
					<span style="margin-left: 12px;font-size: 14px;color: #333333;"><u-count-down :time="time*1000" format="HH:mm:ss" style="margin-left: 110px;margin-top: -20px;"></u-count-down></span>
					<span style="margin-left: 12px;font-size: 14px;color: #CCCCCC;margin-left: 320px;position: relative;top: -20px;"><b>更多</b></span>
				</view>
				<view class="lb">
				<u-scroll-list @right="right" @left="left" :indicator="indicator">
				    <view class="scroll-list" style="flex-direction: row;">
				        <view
				                class="scroll-list__goods-item"
				                v-for="(item, index) in xsdh"
				                :key="index"
				                :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
				        >
				            <image @click="gotospxq(item.commodityId)" class="scroll-list__goods-item__image" :src="item.commodityimgs[0].pash"></image>
				            <text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
				        </view>
				        <view class="scroll-list__show-more">
				            <text class="scroll-list__show-more__text">查看更多</text>
				            <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
				        </view>
				    </view>
				</u-scroll-list>
				</view>
			</view>
			<view style="width: 100%;height: 10px; background-color: #ECFDFA;"></view>
			<view class="xsqg">
				<view class="xs">
					<view style="width: 4px;height: 17px;background-color: #f56c6c;margin-left: 20px;margin-top: 3px;border-radius: 15px;display: inline-block"></view>
					<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>近期热门</b></span>
					<navigator url="./remen">
					<span style="margin-left: 12px;font-size: 14px;color: #CCCCCC;margin-left: 320px;position: relative;top: -20px;"><b>更多</b></span>
					</navigator>
				</view>
				
				<view class="lb1">
				<u-scroll-list @right="right" @left="left" :indicator="indicator">
				    <view class="scroll-list" style="flex-direction: row;">
				        <view
				                class="scroll-list__goods-item"
				                v-for="(item, index) in remen"
				                :key="index"
				                :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
				        >	
				            <image @click="gotospxq(item.commodityId)" class="scroll-list__goods-item__image" :src="item.commodityimgs[0].pash"></image>
							
				            <text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
				        </view>
						<navigator url="./remen">
				        <view class="scroll-list__show-more">
							
				            <text class="scroll-list__show-more__text">查看更多</text>
							
				            <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
				        </view>
						</navigator>
				    </view>
				</u-scroll-list>
				</view>
			</view>
			<view style="width: 100%;height: 10px; background-color: #ECFDFA;"></view>
			<view class="xsqg">
				<view class="xs">
					<view style="width: 4px;height: 17px;background-color: #f56c6c;margin-left: 20px;margin-top: 3px;border-radius: 15px;display: inline-block"></view>
					<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>猜你喜欢</b></span>
					
					
				</view>
				<view style="width: 340px;height: 400px;margin-left: 18px;background-color: #FFFFFF;margin-top: -10px;">
					<view class="sp" v-for="item in caini">
						<image :src="item.commodityimgs[0].pash" @click="gotospxq(item.commodityId)" style="width: 160px;height: 170px;border-radius: 10px;"></image>
						<span style="font-size: 14px;color: #333333;margin-left: 10px;">{{item.commodityName}}</span>
						<br>
						<span style="font-size: 14px;color: #333333;margin-left: 10px;"><b>{{item.price}}币</b></span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicator: false,
				list1: [{
					price: '230.5',
				    thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
				}, {
					price: '74.1',
				    thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
				}, {
					price: '8457',
				    thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
				}, {
					price: '1442',
				    thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
				}, {
					price: '541',
				    thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
				}, {
					price: '234',
				    thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
				}, {
					price: '562',
				    thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
				}, {
					price: '251.5',
				    thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
				}],
				userid:'',
				remen:[],
				caini:[],
				xsdh:[],
				time:'',
			}
		},
		onLoad() {
			this.initsc()
		},
		methods: {
			gotospxq(commodityid){
				uni.navigateTo({
					url:'./spxq?commodityid='+commodityid
				})
			},
			initsc(){
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/initsc',
					method: 'GET',
				   data: {
					   userid: this.userid,
				   },
				   dataType:'json',
				   success: (res) => {
						var result = res.data.message;
						console.log(result)
						this.remen=res.data.data.map.remen
						console.log(res.data.data.map.remen)
						this.caini=res.data.data.map.caini
						if(res.data.message !="空"){
							this.xsdh=res.data.data.map.xsdh
							this.time=this.xsdh[0].time
						}
						
							
					},
				})	
			}
		}
	}
</script>

<style lang="scss">
	.sp{
		width: 160px;
		height: 230px;
		background-color: #FFFFFF;
		border-radius: 10px;
		float: left;
		margin-left: 7px;
		margin-top: 15px;
		box-shadow: 2px 2px 10px #909090;
	}
	.zong{
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	.lb{
		width: 340px;
		height: 90px;
		margin-left: 18px;
		background-color: #FFFFFF;
		margin-top: -10px;
	}
	.lb1{
		width: 340px;
		height: 90px;
		margin-left: 18px;
		background-color: #FFFFFF;
		margin-top: 8px;
	}
	.xs{
		width: 100%;
		height: 25px;
		background-color: #FFFFFF;
		padding: 5px;
		display: inline-block
	}
	.xsqg{
		width: 100%;
		height: 178px;
		// background-color: #007AFF;
		
	}
	.sygn{
		width: 335px;
		height: 70px;
		/* background-color: #F3A73F; */
		border-radius: 10px;
		position: absolute;
		top: 295px;
		left: 20px;
	}
	.lunb{
		width: 335px;
		height: 120px;
		background-color: #F3A73F;
		border-radius: 10px;
		position: absolute;
		top: 100px;
		left: 20px;
	}
	.jh{
		width: 335px;
		height: 75px;
		background-color: #FFFFFF;
		border-radius: 10px;
		position: absolute;
		top: 70px;
		left: 20px;
		/* opacity: 0.6; */
		background-color: rgba(255, 255, 255, 0.5);
	}
	.ss{
		width: 25px;
		height: 25px;
		/* background-image: url(../../static/img/fenlei.png); */
		/* background-color: #000000; */
		margin-left: 330px;
		position: absolute;
		top: 22px;
		
	}
	.fl{
		width: 25px;
		height: 25px;
		/* background-image: url(../../static/img/fenlei.png); */
		/* background-color: #000000; */
		margin-left: 280px;
		position: absolute;
		top: 20px;
		
	}
	.sj{
		font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
		    font-weight: 700;
		    font-size: 20px;
		    color: #FFFFFF;
		    margin-left: 15px;
			position: absolute;
			top: 20px;
	}
	
	.bj1{
		width:100%;
		height:468rpx;
		background-image: url(../../static/indeimg/xia.png);
		
	}
	.scroll-list {
		@include flex(column);
	
		&__goods-item {
			margin-right: 20px;
	
			&__image {
				width: 85px;
				height: 85px;
				border-radius: 10px;
			}
	
			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}
	
		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;
	
			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}
</style>
